<template>
	<view class="page" @touchstart="touchStart" @touchend="touchEnd">
		<form>
			<view class="uni-textarea">
				<textarea placeholder="这一刻的想法..." v-model="input_content" />
				</view>
			<view class="uni-list list-pd">
				<view class="uni-list-cell cell-pd">
					<view class="uni-uploader">
						<view class="uni-uploader-head">
							<view class="uni-uploader-title"></view>
							<view class="uni-uploader-info">{{imageList.length}}/9</view>
						</view>
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image,index) in imageList" :key="index">
									<view class="uni-uploader__file" style="position: relative;">
										<image class="uni-uploader__img" mode="aspectFill" :src="image" :data-src="image" @tap="previewImage"></image>
										<view class="close-view" @click="close(index)">×</view>
									</view>
								</block>
								<view class="uni-uploader__input-box" v-show="imageList.length < 10">
									<view class="uni-uploader__input" @tap="chooseImage"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="footer">
				<button type="default" class="feedback-submit" @click="publish">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import image from '@/common/image.js'
	
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		data() {
			return {
				// title: 'choose/previewImage',
				input_content:'',
				imageList: [],
				
				user:{},
				myuid:'',
				
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				
				//侧滑返回start
				startX: 0, //点击屏幕起始位置
				movedX: 0, //横向移动的距离
				endX: 0, //接触屏幕后移开时的位置
				//end
			}
		},
		created() {
			
			this.myuid = uni.getStorageSync("user").userId;
			console.log(this.myuid);
			this.selectUser();
		},
		onUnload() {
			this.imageList = [],
				this.sourceTypeIndex = 2,
				this.sourceType = ['拍照', '相册', '拍照或相册'],
				this.sizeTypeIndex = 2,
				this.sizeType = ['压缩', '原图', '压缩或原图'],
				this.countIndex = 8;
		},
		
		methods: {
			selectUser(){
				var _this = this;
				uni.request({
					url:_this.webUrl+'user/selectUser',
					method:'GET',
					data:{userId:_this.myuid},
					dataType:'json',
					success: (res) => {
						this.user = res.data;
					}
				});
			},
			async publish(){
				var _this = this;
				console.log(this.input_content);
				if (!this.input_content) {
					uni.showModal({ content: '内容不能为空', showCancel: false, });
					return;
				}
				
				
				
				var permission=await this.choosePersission();//选择对谁可见
				var location = await this.getLocation();//位置信息,可删除,主要想记录一下异步转同步处理
				uni.showLoading({title:'发布中'});
				var images = [];
				for(var i = 0,len = this.imageList.length; i < len; i++){
					var image_obj = {name:'image'+i,uri:this.imageList[i]};
					images.push(image_obj);
				}
				console.log(permission);
				console.log(222222222)
				var url=this.webUrl+'releaseDetails';
				
				console.log(images);
					console.log("--------------------------------------");
				uni.uploadFile({//该上传仅为示例,可根据自己业务修改或封装,注意:统一上传可能会导致服务器压力过大
					url: url, //仅为示例，非真实的接口地址
					files:images,//有files时,会忽略filePath和name
					filePath: '',
					name: 'image',
					formData: {//后台以post方式接收
						'userId':_this.user.userId,//自己系统中的用户id
						'share': this.input_content,//moment文字部分
						'campId':this.user.campId,
						'permisson':permission,
						'longitude':location.longitude,//经度
						'latitude':location.latitude//纬度
					},
					success: (uploadFileRes) => {
						console.log("success");
						uni.hideLoading();
						uni.showToast({
							icon:'success',
							title:"发布成功",
							success() {
								console.log("tiaozhuan");
								uni.switchTab({
									url:"/pages/detial/detial",
									fail(e) {
										console.log(e);
									}
								});
							}
						});
					},
					fail: (e) => {
						console.log("失败");
						console.log("e: " + JSON.stringify(e));
						uni.hideLoading();
						uni.showToast({
							icon:'none',
							title:"发布失败,请检查网络"
						})
					}
				});
			},
			
			getLocation(){//h5中可能不支持,自己选择
				return new Promise((resolve, reject) => {
					// uni.chooseLocation({
					//     success: function (res) {
					// 		resolve(res);
					//     },
					// 	fail: (e) => {  
					// 		uni.showToast({
					// 			icon:'success',
					// 			title:"取消发布"
					// 		})
					// 	}
					// });
					uni.getLocation({
						type: 'wgs84',
						success: function (res) {
							resolve(res);
						},
						fail: (e) => {  
							reject(e);
					}
					});
				} )
			},
			
			choosePersission(){
				var list = [];
				list.push("所有人可见");
				list.push("仅好友可见");
				if(this.user.campId){
					list.push("所在营地可见");
					list.push("营地及好友可见");
				}
				return new Promise((resolve, reject) => {
					uni.showActionSheet({
						itemList: list,
						success: function (res) {
						    console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
							resolve(res.tapIndex);
						},
						fail: function (res) {
						  uni.hideLoading();
						  uni.showToast({
						  	icon:'success',
						  	title:"取消发布"
						  })
						}
					})
				} )
			},
			
			close(e){
			    this.imageList.splice(e,1);
			},
			chooseImage: async function() {
				if (this.imageList.length === 9) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				console.log("===========================");
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
					success: (res) => {
						// #ifdef APP-PLUS
						//提交压缩,因为使用了H5+ Api,所以自定义压缩目前仅支持APP平台
						var compressd = cp_images=> {
							this.imageList = this.imageList.concat(cp_images)//压缩后的图片路径
						}
						console.log("===========================");
						console.log(res.tempFilePaths);
						image.compress(res.tempFilePaths,compressd);
						// #endif
						// #ifndef APP-PLUS
						
						
						this.imageList = this.imageList.concat(res.tempFilePaths.slice(0,9-this.imageList.length))//非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
						// #endif
						
						console.log("===========================");
						console.log(res.tempFilePaths);
					}
				})
			},
			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: "已经有9张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			touchStart: function(e) {
				this.startX = e.mp.changedTouches[0].pageX;
			},
			
			touchEnd: function(e) {
				this.endX = e.mp.changedTouches[0].pageX;
				if (this.endX - this.startX > 200) {
					uni.navigateBack();
				}
			}
		}
	}
</script>

<style scoped>
	@import '../../common/index/uni.css';
	.footer {
		margin-top: 80upx;
	}
	
	.cell-pd {
		padding: 20upx 30upx;
	}

	.uni-textarea {
		width: auto;
		padding: 20upx 25upx;
		line-height: 1.6;
		height: 150upx;
	}
	.uni-list::before {
		height: 0;
	}
	.uni-list:after {
		height: 0;
	}
	.list-pd {
		margin-top: 0;
	}
	.close-view{
	    text-align: center;
		line-height:30upx;
		height: 35upx;
		width: 35upx;
		background: #ef5350;
		color: #FFFFFF;
		position: absolute;
		top: 1upx;
		right: 1upx;
		font-size: 35upx;
		border-radius: 8upx;
	}
	.page {
		width: 750upx;
		height: 100%;
	}
</style>
